<!--
 * @Author: your name
 * @Date: 2021-04-06 19:50:45
 * @LastEditTime: 2021-06-06 10:02:42
 * @LastEditors: Please set LastEditors
 * @Description: 个人中心 => 会议进展
 * @FilePath: /medicine-web/src/views/user/modules/meeting.vue
-->
<template>
  <div class="user-meeting">
    <div v-if="resultList && resultList.length > 0">
      <div class="main-search__result-item" v-for="item in resultList" :key="item.id">
        <ul class="main-search__result-content">
          <li @click.stop="navToDetail(item.external_id)">
            <span class="content-regex">{{item.title}}</span>
          </li>
          <li>
            <span v-html="item.abstract"></span>
          </li>
          <li class="main-search__result-func">
            <span>
              <span v-if="item.organization" style="margin-right: 38px;">
                开展机构：{{item.organization}}
              </span>
              <span v-if="item.start_time && item.end_time">
                会议时间：{{item.start_time}} ~ {{item.end_time}}
              </span>
            </span>
            <span v-if="selection === 2">
              <customBtn2 @handleClick="btnClick(item)"></customBtn2>
            </span>
          </li>
        </ul>
      </div>
    </div>
    <div v-else>
      <emptyData></emptyData>
    </div>
    <Pagation v-if="resultList && resultList.length > 0" v-model="pageNum" :total="total"  @handlePage="handlePage" style="margin-top: 48px"></Pagation>
  </div>
</template>
<script>
import customBtn2 from '@/components/CustomBtn2/index'
import Pagation from '@/components/Pagation/index'
import emptyData from '@/components/EmptyData/index'
import { mapGetters } from 'vuex'
export default {
  name: 'userMeeting',
  components: { customBtn2, Pagation, emptyData },
  data () {
    return {
      total: 0,
      pageNum: 1,
      resultList: []
    }
  },
  methods: {
    navToDetail (id) {
      this.$router.push({ path: '/meeting/detail', query: { id } })
    },
    async btnClick (rawData) {
      console.log('btnClick', rawData)
      const res = await this.$action('cancelCollection', { user_id: this.getCookie('uid'), id: rawData.id })
      if (res) {
        this.msgSuccess('取消收藏成功')
        this.fetchData()
      } else {
        this.msgError('取消收藏失败')
      }
    },
    handlePage (count) {
      this.pageNum = count
      this.fetchData()
    },
    async fetchData () {
      console.log('this.selection', this.selection)
      let res
      if (this.selection === 1) { // 下载列表
        res = await this.$action('getUserDownload', { page: this.pageNum, limit: 10, user_id: this.getCookie('uid'), module: 2 })
        console.log('getUserDownload', res)
      }
      if (this.selection === 2) { // 收藏列表
        res = await this.$action('getUserCollection', { page: this.pageNum, limit: 10, user_id: this.getCookie('uid'), module: 2 })
        console.log('getUserCollection', res)
      }
      if (res && Object.keys(res).length > 0) {
        this.resultList = res.data_list
        this.total = res.total_number || 0
      }
    },
  },
  mounted () {
    this.fetchData()
  },
  watch: {
    selection (val, oldVal) {
      console.log('val', val)
      this.pageNum = 1
      this.fetchData()
    },
  },
  computed: {
    ...mapGetters({
      selection: 'selection'
    })
  },
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/flex.scss';
@import '~@/assets/styles/common.scss';
.user-meeting {
  /deep/ .ant-pagination {
    text-align: right;
  }
  .main-search__result-item {
    @include flex-def;
    .main-search__result-content {
      width: 100%;
      margin-left: 8px;
      li:nth-child(n+2) {
        // margin-top: 10px;
        font-size: 14px;
        color: #555;
      }
      li:nth-child(1) {
        font-size: 14px;
        color: #555;
        font-weight: bold;
        cursor: pointer;
      }
      .main-search__result-func {
        @include flex-def;
        @include flex-cCenter;
        @include flex-zBetween;
        height: 32px;
      }
    }
  }
}
</style>